<script>
import { defineComponent } from "vue";
import SupermapCard from "@/components/SupermapCard/index.vue";
import Api from "@/Api";

export default defineComponent({
  name: "Section-1",
  components: {
    SupermapCard,
  },
  setup() {},
  data() {
    return {
      title: "缺陷点总数",
      total: 0,
      defectData: {
        level_1: 0,
        level_2: 0,
        level_3: 0,
        level_4: 0,
      },
    };
  },
  mounted() {
    this.getData();
  },
  watch: {},
  computed: {},
  beforeRouteLeave() {},
  methods: {
    async getData() {
      const res = await Api.getDefectivePoint();
      const t = {};
      this.total = res.features.length;
      for (let i = 0; i < res.features.length; i++) {
        const item = res.features[i];
        t[item.fieldValues[0]] = !t[item.fieldValues[0]]
          ? 1
          : t[item.fieldValues[0]] + 1;
      }
      this.defectData = {
        level_1: t["1"] || 0,
        level_2: t["2"] || 0,
        level_3: t["3"] || 0,
        level_4: t["4"] || 0,
      };
    },
  },
});
</script>
<template>
  <div class="section section-one">
    <supermap-card
      :title="title"
      :width="350"
      :top="70"
      :right="20"
      :height="36"
      :bottom="20"
      :shouldDrag="true"
    >
      <div class="main-title">
        <div class="inner">
          缺陷点
          <span class="weight">{{ total }}</span>
          个
        </div>
      </div>
      <div id="echart-section-1">
        <div class="item">
          <div class="left-side level-1"></div>
          <div class="right-side">
            <div class="value">
              <span class="weight">{{
                defectData.level_1
              }}</span>
              个
            </div>
            <div class="title">一级缺陷点</div>
          </div>
        </div>
        <div class="item">
          <div class="left-side level-2"></div>
          <div class="right-side">
            <div class="value">
              <span class="weight">{{ defectData.level_2 }}</span>
              个
            </div>
            <div class="title">二级缺陷点</div>
          </div>
        </div>
        <div class="item">
          <div class="left-side level-3"></div>
          <div class="right-side">
            <div class="value">
              <span class="weight">{{ defectData.level_3 }}</span>
              个
            </div>
            <div class="title">三级缺陷点</div>
          </div>
        </div>
        <div class="item">
          <div class="left-side level-4"></div>
          <div class="right-side">
            <div class="value">
              <span class="weight">{{ defectData.level_4 }}</span>
              个
            </div>
            <div class="title">四级缺陷点</div>
          </div>
        </div>
      </div>
    </supermap-card>
  </div>
</template>
<style scoped lang="less">
.section-one {
  position: absolute;
  top: 10.3rem;
  left: 1rem;
  width: 43rem;
}

.main-title {
  height: 5rem;
  background-color: rgba(224, 233, 246, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  & > .inner {
    padding: 0 4rem;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #666;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0 center, right 0 center;
    background-image: url(@/assets/images/time-slider/icon-arrow-left.png),
      url(@/assets/images/time-slider/icon-arrow-right.png);
  }
}
.weight {
  font-weight: bold;
  color: #000;
  padding: 0 5px;
}

#echart-section-1 {
  height: 15rem;
  background-color: rgba(224, 233, 246, 0.8);
  display: flex;
  flex-wrap: wrap;
  & > .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
    color: #666;
    & > .left-side {
      width: 6rem;
      height: 6rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      &.level-1 {
        background-image: url(./images/level-1.png);
      }
      &.level-2 {
        background-image: url(./images/level-2.png);
      }
      &.level-3 {
        background-image: url(./images/level-3.png);
      }
      &.level-4 {
        background-image: url(./images/level-4.png);
      }
    }
    & > .right-side {
      flex: 1;
      padding-left: 1rem;
      font-size: 1.6rem;
    }
  }
}
</style>
